<template>
  <div :style="wrapStyle" class="wrapStyle">
    <div class="flex" style="margin-bottom: 20px">
      <div style="margin-right: 20px; width: 180px">
        <DatePicker v-model="params.year" type="year"></DatePicker>
      </div>
      <div style="margin-right: 20px; width: 380px">
        <courseQuery v-model="params.curriculum_id" multiple="1"></courseQuery>
      </div>
    </div>
    <div v-if="xAxisData.length">
      <bar
        id="3"
        titleText="班级人数分析"
        :size="props.gridHeight - 35"
        :xAxisData="xAxisData"
        :seriesData="seriesData"
      ></bar>
    </div>
  </div>
</template>

<script setup lang="ts">
let props = defineProps(["gridHeight"]);
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();

let params = ref({
  year: proxy.$utils.dateTimeFormateFn(Date.now(), "year"),
  curriculum_id: [],
});
let list = ref([]);
let wrapStyle = computed(() => {
  return {
    height: props.gridHeight + "px",
  };
});

let yAxisParams = computed(() => {
  return [
    {
      type: "value",
      name: "Precipitation",
      min: 0,
      max: 100,
      interval: 10,
      axisLabel: {
        formatter: "{value}",
      },
    },
    {
      type: "value",
      name: "鉴定合格率",
      min: 0,
      max: 100,
      interval: 10,
      axisLabel: {
        formatter: "{value} %",
      },
    },
  ];
});

let xAxisData = computed(() => {
  let arr = [];
  if (!list.value.length) return [];
  list.value.forEach((element) => {
    arr.push(element.className);
  });
  return arr;
});

let seriesData = computed(() => {
  let arr1 = [];
  let arr2 = [];
  let arr3 = [];
  list.value.forEach((element) => {
    arr1.push(element.classAll);
    arr2.push(element.classExamination);
    arr3.push(element.qualificationRate);
  });
  let arr = [
    {
      name: "班级人数",
      type: "bar",
      barWidth: "40px",
      emphasis: { focus: "series" },
      label: {
        show: true, // 显示标签
        position: "top", // 标签位置：在顶部
        formatter: "{c}", // 标签内容格式，这里用 {c} 表示数据值
      },
      data: arr1,
    },
    {
      name: "获证人数",
      type: "bar",
      barWidth: "40px",
      emphasis: { focus: "series" },
      label: {
        show: true, // 显示标签
        position: "top", // 标签位置：在顶部
        formatter: "{c}", // 标签内容格式，这里用 {c} 表示数据值
      },
      data: arr2,
    },
    {
      name: "鉴定合格率",
      type: "line",
      //yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + "%";
        },
      },
      data: arr3,
    },
  ];
  return arr;
});

async function search() {
  let array = await proxy.$apis.classInfoReport(params.value);
  for (let index = 0; index < array.length; index++) {
    const element = array[index];
    let { qualificationRate } = await counter.trainingResultExportParams(
      element.classId
    );
    element.qualificationRate = qualificationRate
      ? Number(qualificationRate)
      : 0;
  }
  list.value = array;
}

watch(
  () => params.value,
  (newValue, oldValue) => {
    if (newValue) search();
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.wrapStyle {
  border: 1px solid #e8e8e8;
  padding: 15px 0 0 15px;
}
</style>
